<template>
	<div>
		<h1>首页</h1>
		<router-link to="/about">跳转到about</router-link>
		<div>
			{{ count }}
			<button @click="handleAsyncIncrement">+1</button>
			<button @click="handleDecrease">-1</button>
		</div>
		<div>
			{{ list }}
		</div>
	</div>
</template>
<script>
export default {
    computed: {
		count(){
			return this.$store.state.count
		},
		list(){
			return this.$store.getters.filteredList;
		}
	},
	methods: {
		handleIncrement(){
			this.$store.commit('increment');
		},
		handleDecrease(){
			this.$store.commit('decrease');
		},
		handleAsyncIncrement(){
			this.$store.dispatch('asyncIncrement').then(()=>{
				console.log(this.$store.state.count);
			})
		}
	}
}
</script>

